<template>
  <div class="content">
    <div class="content_left">
      <img src="../assets/image/headerimg.png" alt="" />
      <div class="title" :class="{titlechecked:currentUrl=='/index'}" @click="goHome">
        <i class="iconfont icon-shouye"></i>首页
      </div>
      <div class="i">
        admin,下午好！外面的天气好吗？记得朵朵白云曾捎来朋友殷殷的祝福。
      </div>
    </div>
    <div class="content_right">
      <el-dropdown placement="bottom" @command="handleCommand($event)">
       <div class="set"><i class="iconfont icon-xitong"></i>设置</div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="item in navlist" :key="item.id" :command="item.url">{{ item.name }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <div class="set" @click="logout"><i class="iconfont icon-tuichu"></i>退出登录</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter,useRoute } from "vue-router";
import { ref,watch } from "vue";
import { navdata } from "../service/meau/type";
import {useStore}  from "../store/index";
import { storeToRefs } from "pinia";


const usestore = useStore()
const {menus} = storeToRefs(usestore)
//路由切换
let currentUrl = ref("/")
let route = useRoute()
//监听路由变换
watch(()=>route.path,()=>{
  currentUrl.value =   route.path
},{immediate:true})

//退出登录
const logout = () => {
  sessionStorage.clear()
  router.push("/login");
};


//列表展示
// let meaulist = JSON.parse(sessionStorage.getItem("menu")!) as navdata[];
let navlist:any = ref<navdata[]>([])
navlist.value = menus.value.filter((item:any)=>item.pid===0&&item.postion=="top");
//点击跳转
const handleCommand = (e: string) => {
  
  router.push(e)
  
};

//跳转主页
const router = useRouter();
const goHome = () => {
  router.push("/");
};
</script>

<style lang="less" scoped>
@import url(../assets/home/homeHeader.less);
</style>